<template>
    <el-drawer
      class="avue-dialog suprise"
      :title=title
      :visible.sync=showDraw
      :direction=website.dialogDirection
      :size=size
      :center="false"
      :modal="true"
      :wrapperClosable="false"
      :destroy-on-close="true"
      :append-to-body="true"
      @close=close
    >
        <template slot="title">
        <div class="drawTitle">
            <span>{{ title }}</span>
                <i
                :class="[
                'drawIcon',
                    { 'el-icon-full-screen': size !='100%' },
                    { 'myfont icon-a-ziyuan72': size == '100%' },
                ]"
                @click="size != '100%' ? (size = '100%') : (size = wid?wid:'75%')"
                ></i>
            </div>
        </template>
        <slot></slot>
    </el-drawer>
</template>
<script>
export default {
    data(){
        return{
            size:this.wid?this.wid:'75%',
        }
    },
    props:{
        title:[String],
        showDraw:[Boolean],
        wid: [String]
    },
    methods:{
        close(){
            // this.size='75%'
            this.$emit('close')
        }
    }
}
</script>
<style lang="scss">
.suprise {
  .drawTitle {
    > span {
      font-weight: bold;
      font-size: 22px;
      color: #333;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
    .drawIcon {
        font-size: 15px;
        cursor: pointer;
  }
  .el-drawer__header {
    margin-bottom: 0;
  }
}
</style>
